<template>
  <div class="my-footer">
    <div class="link-row">
      <div class="title"> 技术文档：</div>
      <span class="content">
        <a
          href="http://element-cn.eleme.io/#/zh-CN"
          target="_blank"
          rel="noopener noreferrer"
        >ElemntUI官方文档</a>
        <a
          href="https://cn.vuejs.org/"
          target="_blank"
          rel="noopener noreferrer"
        >VUE.JS官方文档</a>
        <a
          href="https://router.vuejs.org/zh/"
          target="_blank"
          rel="noopener noreferrer"
        >VUE-ROUTER库官方文档</a>
        <a
          href="https://www.webpackjs.com/"
          target="_blank"
          rel="noopener noreferrer"
        >webpack4.0文档</a>
      </span>
    </div>
    <div class="link-row">
      <span class="title"> 开源仓库：</span>
      <span class="content">
        <a
          href="https://gitee.com/icequanquan/video"
          target="_blank"
          rel="noopener noreferrer"
        >码云</a>
      </span>
    </div>
    <div class="link-row">
      <span class="title"> 邮箱：</span>
      <span class="content">
        <a href="javascript:0">1065006065@qq.com</a>
      </span>
    </div>
    <div class="copyright">
       Copyright © 2019-2030 C5-504. 保留所有权利
    </div>
  </div>
</template>

<script>
export default {
  name: "name",
  data: function() {
    return {};
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.my-footer {
  width: 1180px;
  margin: 0 auto;
  font-size: 12px;
  .link-row {
    width: 900px;
    margin: 0 auto;
    line-height: 20px;
    .title{
      color: #8d8b8b;
      display: inline-block;
      width: 77px;
      font-size:14px;
      font-weight: 400;
      text-align: right;
    }
    .content{
      a{
        color: #3b3a3a;
        margin:auto 20px;
      }
    }
  }
  .copyright{
    width: 400px;
    line-height: 50px;
    margin: 30px auto 0 auto;
    color: #8d8b8b;
  }
}
</style>